<template>
  <Dialog v-model:visible="visible" :showTop="false" :top="`5vh`" width="900px">
    <Form
      v-slot="{ validate, values, resetForm, setFieldValue, setFieldError }"
      class="form"
      :initialValues="{
           fileStr:`请选择要上传的图片`
      }"
      :validation-schema="schema"
    >
      <div class="row">
        <div class="field">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >图片：</span
            >
          </div>
          <div class="line" @click="()=>uploads(setFieldValue,setFieldError)" :title="values.fileStr">
            <button>上传文件</button> 
             &nbsp;<div class="text overOne">{{values.fileStr}}</div>
            <ErrorMessage name="image" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >面料号：</span
            >
          </div>
          <div class="line">
            <Field name="serial" as="input" placeholder="请输入面料号" />
            <ErrorMessage name="serial" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >面料成份：</span
            >
          </div>
          <div class="line">
            <Field name="makeup" as="input" placeholder="请输入面料成份" />
            <ErrorMessage name="makeup" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >面料幅宽：</span
            >
          </div>
          <div class="line">
            <Field name="fabric_width" as="input" placeholder="请输入面料幅宽" />
            <ErrorMessage name="fabric_width" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >整理方式：</span
            >
          </div>
          <div class="line">
            <Field name="tidy" as="input" placeholder="请输入整理方式" />
            <ErrorMessage name="tidy" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >面料颜色：</span
            >
          </div>
          <div class="line">
            <Field name="fabric_color" as="input" placeholder="请输入面料颜色" />
            <ErrorMessage name="fabric_color" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <img :src="publicUrl(`/images/required.png`)" />&nbsp;<span
              >面料花纹：</span
            >
          </div>
          <div class="line">
            <Field name="pattern" as="input" placeholder="请输入面料花纹" />
            <ErrorMessage name="pattern" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <span>经向缩水率：</span>
          </div>
          <div class="line">
            <Field
              name="lng_shrink"
              as="input"
              placeholder="请输入经向缩水率"
            />
            <ErrorMessage name="lng_shrink" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <span>公式：</span>
          </div>
          <div class="line">
            <Field
              name="lng_shrink_formula"
              as="input"
              placeholder="请输入公式"
            />
            <ErrorMessage name="lng_shrink_formula" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <span>纬向缩水率：</span>
          </div>
          <div class="line">
            <Field name="lat_shrink" as="input" placeholder="请输入整理方式" />
            <ErrorMessage name="lat_shrink" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <span>公式：</span>
          </div>
          <div class="line">
            <Field
              name="lat_shrink_formula"
              as="input"
              placeholder="请输入公式"
            />
            <ErrorMessage name="lat_shrink_formula" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <span>经纱条宽：</span>
          </div>
          <div class="line">
            <Field name="lng_width" as="input" placeholder="请输入经纱条宽" />
            <ErrorMessage name="lng_width" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <span>纬纱条宽：</span>
          </div>
          <div class="line">
            <Field name="lat_width" as="input" placeholder="请输入纬纱条宽" />
            <ErrorMessage name="lat_width" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <span>胶：</span>
          </div>
          <div class="line">
            <Field name="glue" as="input" placeholder="1310白" />
            <ErrorMessage name="glue" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
            <span>胶幅宽：</span>
          </div>
          <div class="line">
            <Field name="glue_width" as="input" placeholder="110" />
            <ErrorMessage name="glue_width" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <div class="label">
            <span
              >朴：</span
            >
          </div>
          <div class="line">
            <Field name="park" as="input" placeholder="1305白" />
            <ErrorMessage name="park" class="errorMsg" />
          </div>
        </div>

        <div class="field mar-left">
          <div class="label">
           <span
              >朴幅宽：</span
            >
          </div>
          <div class="line">
            <Field name="park_width" as="input" placeholder="110" />
            <ErrorMessage name="park_width" class="errorMsg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="field" style="width: 100%;">
          <div class="label">
            <span>快递单号：</span>
          </div>
          <div class="line">
            <Field name="track_num" as="input" placeholder="请输入快递单号" />
            
            <ErrorMessage name="track_num" class="errorMsg" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="field" style="width: 100%;">
          <div class="label">
            <span>邮寄地址：</span>
          </div>
          <div class="line" style="color: #696969;">
              张全蛋-18254622584 广东省中山市港口镇某某大夏某某楼层1122号
          </div>
        </div>
      </div>
      <div class="row-button">

      <Button
        class="button thumb"
        color="white"
        background="#232481"
        size="16px"
        @click="() => submit(validate, values)"
        >保存</Button
      >
      <Button
        class="button thumb"
        color="white"
        background="#232481"
        size="16px"
        @click="() => resetForm()"
        >重置</Button
      >
    
    </div>
    </Form>
  </Dialog>
</template>
<script setup lang="ts" name="">
import { ref, watch } from "vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import getFile from "@/utils/getFile";
import Button from "@/components/Button/index.vue";
import { publicUrl, validateRule } from "@/utils/util";
import * as yup from "yup";
import Dialog from "@/components/Dialog/index.vue";
import {toast} from "vue3-toastify";

interface Props {
  visible: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
});
const schema = yup.object().shape({
    image: yup
    .string()
    .required("图片不为空"),
    fileStr: yup
    .string(),
    serial: yup
    .string()
    .required("面料号不为空")
    .max(255, "最多为255个字符"),
    makeup: yup
    .string()
    .required("面料成份不为空")
    .max(255, "最多为255个字符"),
    fabric_width: yup
    .string()
    .required("面料幅宽不为空")
    .max(255, "最多为255个字符"),
    tidy: yup
    .string()
    .required("整理方式不为空")
    .max(255, "最多为255个字符"),
    fabric_color: yup
    .string()
    .required("面料颜色不为空")
    .max(255, "最多为255个字符"),
    pattern: yup
    .string()
    .required("面料花纹不为空")
    .max(255, "最多为255个字符"),
    lng_shrink: yup
    .string()
    .max(255, "最多为255个字符"),
    lng_shrink_formula: yup
    .string()
    .max(255, "最多为255个字符"),
    lat_shrink: yup
    .string()
    .max(255, "最多为255个字符"),
    lat_shrink_formula: yup
    .string()
    .max(255, "最多为255个字符"),
    lng_width: yup
    .string()
    .max(255, "最多为255个字符"),
    lat_width: yup
    .string()
    .max(255, "最多为255个字符"),
    glue: yup
    .string()
    .max(255, "最多为255个字符"),
    glue_width: yup
    .string()
    .max(255, "最多为255个字符"),
    park: yup
    .string()
    .max(255, "最多为255个字符"),
    park_width: yup
    .string()
    .max(255, "最多为255个字符"),
    track_num: yup
    .string()
    .max(255, "最多为512个字符"),

});

const uploads = (
  setFieldValue: any,
  setFieldError: any,
) =>
  getFile("image", undefined, {
    successResult: (file: File) => {
        setFieldValue('image',file)
        setFieldValue('fileStr',file.name)
        setFieldError('image',"")
    },
    errorResult(msg: string) {
        setFieldError('image', msg);
    },
  });

const submit = async (validate: any, values: any) => {
  let valid = (await validate()).valid;
  if(valid === false){
     toast.error(`信息填写错误`);
     return;
  } 
  toast.success(`添加成功`);
  visible.value = false;
};
const emits = defineEmits<{
  (event: "update:visible", value: boolean): void;
}>();

watch(
  () => props.visible,
  (newValue: boolean) => {
    visible.value = newValue;
  }
);

const visible = ref<boolean>(props.visible);

watch(
  () => visible.value,
  (newValue: boolean) => {
    emits("update:visible", newValue);
  }
);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
